<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2024-01-21
 -->

<template>
  <div class="edge">
    <div class="section-group">
      <h3 class="h-6 my-2 text-lg font-semibold">样式</h3>
      <hr class="mb-1.5" />

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">边框</span>
        <span class="color-picker" @click="showColorPicker('stroke')" :style="{ background: edgeData.stroke }">
          <el-color-picker v-model="edgeData.stroke" @active-change="updateStroke"></el-color-picker>
        </span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">线段样式</span>
        <span class="iconfont float-right textPos lineDash" v-for="(item, index) in lineDash" :key="index" @click="changeLineDash(item.name)" :class="{ [item.icon]: true, active: edgeData.lineDashType === item.name }"></span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">线段形式</span>
        <span class="iconfont icon-quxianjiantou float-right textPos" @click="changeLineType('bs')" :class="{ active: edgeData.type === 'bs' }"></span>
        <span class="iconfont icon-zhexianjiantou float-right textPos" @click="changeLineType('polyline')" :class="{ active: edgeData.type === 'polyline' }"></span>
        <span class="iconfont icon-zhixianjiantou float-right textPos" @click="changeLineType('line')" :class="{ active: edgeData.type === 'line' }"></span>
      </p>

      <div class="h-6 mt-0.5 clear-both" v-if="edgeData.type === 'polyline'">
        <span class="leading-loose">转折距离</span>

        <el-popover trigger="click" placement="bottom">
          <template #reference>
            <span class="font-size float-right color-picker" @click="showColorPicker('ext')">{{ edgeData.ext }}</span>
          </template>

          <ul>
            <li class="hover:bg-gray-400 hover:text-white" v-for="item in exts" :key="item" @click="pickExt(item)">{{ item }}</li>
          </ul>
        </el-popover>
      </div>
    </div>

    <div class="section-group">
      <h3 class="h-6 my-2 text-lg font-semibold">文字</h3>
      <hr class="mb-1.5" />

      <span class="leading-loose">大小</span>

      <el-popover :visible="edgeData.fontsizeshow" placement="bottom">
        <template #reference>
          <span class="text-center float-right color-picker" @click="showColorPicker('fontsize'), (edgeData.fontsizeshow = true)">{{ edgeData.fontSize }}</span>
        </template>

        <ul>
          <li class="hover:bg-gray-400 hover:text-white" v-for="item in fontsize" :key="item" @click="pickFontSize(item), (edgeData.fontsizeshow = false)">{{ item }}</li>
        </ul>
      </el-popover>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">颜色</span>
        <span class="color-picker" @click="showColorPicker('textFill')" :style="{ background: edgeData.textFill }">
          <el-color-picker v-model="edgeData.textFill" @active-change="updateTextFill"></el-color-picker>
        </span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">样式</span>
        <span class="textPos float-right iconfont icon-qingxie" :class="{ active: edgeData.fontStyle === 'italic' }" @click="setStyle"></span>
        <span class="textPos float-right iconfont icon-jiacu" :class="{ active: edgeData.fontWeight === 'bold' }" @click="setBold"></span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">文字背景</span>
        <span class="color-picker" @click="showColorPicker('fill')" :style="{ background: edgeData.fill }">
          <el-color-picker v-model="edgeData.fill" @active-change="updateFill"></el-color-picker>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
//  import {} from ''
export default {
  name: "edge",
  props: ["edge"],
  data() {
    return {
      fontsize: [12, 14, 16, 18, 20, 24, 28, 32, 36, 40],
      exts: [20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 240, 280, 320, 400, 460, 520, 600, 700, 800, 900, 1000],
      lineDash: [
        {
          dash: [6, 2, 2, 2],
          name: "dashed",
          icon: "icon-line1",
        },
        {
          dash: [4, 2],
          name: "dash",
          icon: "icon-line-dashed",
        },
        {
          dash: [1, 1],
          name: "dott",
          icon: "icon-linedotted",
        },
        {
          dash: [0],
          name: "solid",
          icon: "icon-line",
        },
      ],
      edgeData: {
        strokeshow: false,
        fillshow: false,
        textfillshow: false,
        fontsizeshow: false,
        extshow: false,
        stroke: "",
        fontSize: 12,
        fontStyle: "",
        fontWeight: "",
        fill: "",
        textFill: "",
        ext: 30,
        lineDashType: "solid",
      },
    };
  },

  mounted() {},

  methods: {
    showColorPicker(mark) {
      switch (mark) {
        case "stroke":
          this.edgeData.fillshow = false;
          this.edgeData.textfillshow = false;
          this.edgeData.fontsizeshow = false;
          this.edgeData.extshow = false;
          this.edgeData.strokeshow = this.edgeData.strokeshow;

          break;
        case "textFill":
          this.edgeData.fillshow = false;
          this.edgeData.strokeshow = false;
          this.edgeData.fontsizeshow = false;
          this.edgeData.extshow = false;
          this.edgeData.textfillshow = !this.edgeData.textfillshow;

          break;
        case "fontsize":
          this.edgeData.fillshow = false;
          this.edgeData.strokeshow = false;
          this.edgeData.textfillshow = false;
          this.edgeData.extshow = false;
          break;
        case "fill":
          this.edgeData.fontsizeshow = false;
          this.edgeData.strokeshow = false;
          this.edgeData.textfillshow = false;
          this.edgeData.extshow = false;
          this.edgeData.fillshow = !this.edgeData.fillshow;
          break;
        case "ext":
          this.edgeData.fontsizeshow = false;
          this.edgeData.strokeshow = false;
          this.edgeData.textfillshow = false;
          this.edgeData.fillshow = false;
          this.edgeData.extshow = !this.edgeData.extshow;
          break;
      }
    },

    updateStroke(color) {
      this.edgeData.stroke = color;
      this.$emit("change-edge", { style: { stroke: color }, mark: "line", edge: this.edge });
    },

    changeLineDash(type) {
      this.edgeData.lineDashType = type;
      this.$emit("change-edge", { mark: "type", style: { lineDashType: type }, edge: this.edge });
    },

    changeLineType(type) {
      this.edgeData.type = type;
      this.$emit("change-edge", { mark: "type", style: { type: type }, edge: this.edge });
    },

    pickExt(ext) {
      if (this.edgeData.ext === ext) return;
      this.edgeData.ext = ext;
      this.$emit("change-edge", { mark: "line", style: { ext: ext }, edge: this.edge });
    },

    pickFontSize(fontsize) {
      if (this.edgeData.fontSize === fontsize) return;
      this.edgeData.fontSize = fontsize;
      this.$emit("change-edge", { mark: "descript", style: { fontSize: fontsize }, edge: this.edge });
    },

    updateFill(color) {
      this.edgeData.fill = color;
      this.$emit("change-edge", { style: { fill: color }, mark: "descript", edge: this.edge });
    },

    updateTextFill(color) {
      this.edgeData.textFill = color;
      this.$emit("change-edge", { style: { textFill: color }, mark: "descript", edge: this.edge });
    },

    setStyle() {
      if (this.edgeData.fontStyle == "italic") {
        this.edgeData.fontStyle = "";
        this.$emit("change-edge", { style: { fontStyle: "" }, edge: this.edge, mark: "descript" });
      } else {
        this.edgeData.fontStyle = "italic";
        this.$emit("change-edge", { style: { fontStyle: "italic" }, edge: this.edge, mark: "descript" });
      }
    },

    setBold() {
      if (this.edgeData.fontWeight == "bold") {
        this.edgeData.fontWeight = "";
        this.$emit("change-edge", { style: { fontWeight: "" }, edge: this.edge, mark: "descript" });
      } else {
        this.edgeData.fontWeight = "bold";
        this.$emit("change-edge", { style: { fontWeight: "bold" }, edge: this.edge, mark: "descript" });
      }
    },
  },

  watch: {
    edge: {
      handler(val) {
        console.log(val);
        if (!val) return;
        this.edgeData = { ...this.edgeData, ...this.edge.getData() };
      },
    },
  },
  //  End
};
</script>

<style lang="scss" scoped>
.section-group {
  padding: 0 10px;
  font-size: 12px;
  clear: both;
}

.color-picker {
  float: right;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  line-height: 24px;
}

.font-size-select {
  position: absolute;
  width: 240px;
  border: 1px solid #f5f5f5;
  z-index: 20;
  background: #fff;
  right: 0;
  line-height: 20px;
  padding: 6px;
}

.textPos {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  text-align: center;
  line-height: 24px;
  margin-left: 1px;
  border-radius: 3px;
  .textPos.active {
    background: #409eff;
    color: #fff;
  }
}
</style>
